<template>
	<view class="page_content fullscreen-safe-area">
		<view class="common_card">
			<view class="title_row">
				<view class="com_row">
					<view class="common-bold-title">{{detail.componentGoodsName}}</view>
					<view class="com_type">{{detail.componentType}}</view>
				</view>
				<view class="runStatus" :class="detail.runStatus == '正常' ? 'run_normal' : 'run_error'">{{detail.runStatus == '正常' ? '运行正常' : '运行异常'}}</view>
			</view>
			<view class="device_sn" v-if="detail.remark != null && detail.remark != undefined">{{detail.remark}}</view>
			<view class="device_location">位置：{{detail.location}}</view>
			<view class="device_lastest_time">最后在线：{{detail.updateTime}}</view>
		</view>
		<view class="common_card">
			<view class="seg_row">
				<scroll-view class="h-scroller-content" scroll-x="true" :show-scrollbar="false" enhanced="true" enable-flex="true">
					<view class="h-scroller">
						<view class="seg_item" v-if="componentKeys.length > 1" :class="index == currentTabIndex ? 'seg_item_selected' : 'seg_item_normal'" v-for="(item,index) in componentKeys" :key="index" :data-index="index" @click.stop="tabChanged">
							{{item}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="seg_row" :class="componentKeys.length > 1 ? 'seg_row_s' : ''">
				<view class="sepc_item_1" :class="detail.runStatus == '正常' ? 'sepc_item_normal' : 'sepc_item_error'" v-for="(item,index) in currentSegInfo" :key="index">
					<view class="sepc_item_title">{{item.name}}</view>
					<view class="sepc_item_value_content">
						<view class="sepc_item_value">{{item.value}}</view>
						<view class="sepc_item_value_flag">{{item.unit}}</view>
						<image :src="item.url" mode="aspectFit" style="width: 18rpx;height: 21rpx; margin-bottom: 16rpx;margin-left: 12rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="common_card" style="row-gap: 10rpx;">
			<view class="trend_title_content">
				<view class="save_btns_title">运行趋势</view>
				<view class="trend_date_content">
					<view class="trend_seg_item" :class="index == currentDateSegIndex ? 'seg_item_selected' : 'seg_item_normal'" v-for="(item,index) in dateList" :key="index" :data-index="index" @click.stop="dateChanged">
						{{item}}
					</view>
				</view>
			</view>
			
			<view class="charts-box">
			  <qiun-data-charts 
			    type="mix"
			    :opts="opts"
			    :chartData="chartData"
				:disableScroll="true"
				:ontouch="true"
				:onzoom="false"
				:loadingType="0"
			  />
			</view>
		</view>
		
		<view v-if="canShow" class="common_card" style="row-gap: 32rpx;">
			<view class="save_btns_title">快速操作</view>
			<view class="btns">
				<view class="save_btn" @click.stop="deviceCtrlBtnClick">
					<image src="/static/project/component_device_ctrl.png" mode="aspectFit" style="width: 28rpx;height: 28rpx;"></image>
					<view>设备控制</view>
				</view>
				<view class="save_btn" @click.stop="monitorSettingBtnClick">
					<image src="/static/project/component_device_setting.png" mode="aspectFit" style="width: 28rpx;height: 28rpx;"></image>
					<view>监控设置</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:{},
				componentKeys:[],
				segInfoList:[],
				currentTabIndex:0,
				currentDateSegIndex:0,
				dateList:["1小时","24小时","7天"],
				chartRawData:{},
				
				chartData: {},
				opts: {
					padding: [15, 0, 0, 0],
					legend: {
						position: 'bottom',
						show:false
					},
					fontSize:12,
					dataLabel:false,
					fontColor:"#9CA3AF",
					color:"#9CA3AF",
					enableScroll:true,
					
					xAxis: {
						disableGrid: true,
						fontColor:"#9CA3AF",
						calibration:true,
						// labelCount:10,
						marginTop:5,
						rotateLabel:true,
						itemCount:7,
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [
							// {
							// 	position: "left",
							// 	min:0,
							// },
							// {
							// 	position: "right",
							// 	min: 0,
							// 	// max: 200,
							// 	textAlign: "left",
							// }
						],
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						},
						tooltip: {
							showArrow: false,
							borderRadius: 4,
							legendShow: true,
							legendShape: 'circle',
							format: (item) => {
								// 添加百分比符号的示例
								console.log("哈哈哈-item"+ item);
								return `${item.category}<br/>${item.name}: ${item.data}%`;
							}
						}
					}
				}
			}
		},
		computed:{
			currentSegInfo(){
				return this.segInfoList.length > this.currentTabIndex ? this.segInfoList[this.currentTabIndex] : []
			},
			canShow(){
				return this.$weixinAuth.canControl(this.$Route.query.itemId);
			}
		},
		onLoad(){
			let self = this;
			self.$progressHud.showLoading();
			self.$NetApi.getMethod('/loyu-api/app/component/detail',{
				componentGoodsId:self.$Route.query.id
			}).then(ok => {
				self.$progressHud.hideLoading();
				self.detail = ok.data;
				self.formatData()
				self.getServerData();
			}, fail => {
				self.$progressHud.hideLoading();
				self.$progressHud.showToast(fail.errMsg || '网络错误');
			})

		},
		methods: {
			formatData(){
				let sortedKeys = Object.keys(this.detail.collectInfo || {}).sort();
				this.componentKeys = sortedKeys;
				
				var result = []
				for (var index = 0; index < sortedKeys.length; index++) {
					var str = sortedKeys[index];
					let elec = this.detail.collectInfo[str]
					
					var list = elec.map(item=>{
						return {
							name:item.displayName || '',
							value:item.value.replace(/[+-]/g, ''),
							unit:item.unit,
							url:this.getIcon(this.detail.runStatus == '正常' ? '1' : '2', item.value)
						}
					});
					result.push(list)
				}
				this.segInfoList = result
			},
			getIcon(status, value){
				var url = ''
				if(status == 1) {
					let flag = value[0]
					switch (flag){
						case '+':
							url = '/static/project/level_high.png'
							break;
						case '-':
							url = '/static/project/level_low.png'
							break;
						default:
							url = '/static/project/level_normal.png'
							break;
					}
				} else {
					url = '/static/project/level_warning.png'
				}
				return url;
			},
			tabChanged(e){
				if(this.currentTabIndex != e.currentTarget.dataset.index) {
					this.currentTabIndex = e.currentTarget.dataset.index;
					this.getServerData()
				}
			},
			dateChanged(e){
				if(e.currentTarget.dataset.index != this.currentDateSegIndex) {
					this.currentDateSegIndex = e.currentTarget.dataset.index;
					this.getServerData()
				}
			},
			monitorSettingBtnClick(){
				this.$Router.push({
					path:'/modules/projects/pages/monitorSetting/monitorSetting',
					query:{
						id:this.detail.componentGoodsId
					}
				})
			},
			deviceCtrlBtnClick(){
				this.$Router.push({
					path:'/modules/projects/pages/deviceControl/deviceControl',
					query:{
						id:this.detail.componentGoodsId
					}
				})
			},
			getServerData() {
				
				let key = this.componentKeys[this.currentTabIndex];
				this.$progressHud.showLoading();
				this.$NetApi.postMethod('/loyu-api/app/component/trend',{
					componentGoodsId:this.$Route.query.id,
					collectInterface:key,
					timeRange:this.currentDateSegIndex+1
				}).then(ok => {
					this.$progressHud.hideLoading();
					let infos = ok.data.timePoints || []
					var monitorTypes = ok.data.monitorType || []
					monitorTypes = monitorTypes.sort((a, b) => {
					  if (b.displayName === "电压") return 1;
					  if (a.displayName === "电压") return -1;
					  return 0;
					});
					
					var names =[];
					var datas =[];
					monitorTypes.forEach(item=>{
						let name = item.displayName + '(' + item.unit + ')'
						names.push(name)
						
						let data = infos.map(it=>{
							var key = it[item.key];
							if(typeof key == 'string') {
								key = parseInt(key);
							} else if( key === null || key === undefined) {
								key = 0
							}
							return key;
						});
						datas.push(data)
					});
					
					var times = infos.map(it=>{
									return it.time || ''
								});
					
					this.chartRawData = {
						names,
						times,
						datas
					}
					
					this.showChart();
				}, fail => {
					this.$progressHud.hideLoading();
					this.$progressHud.showToast(fail.errMsg || '网络错误');
				})
			},
			
			showChart(){
				var yAxisData = []
				this.chartRawData.names.map((item,index)=>{
					yAxisData[index] = {
						title:item,
						position: (index == 0) ? 'left' : 'right',
						min:0,
						textAlign: (index == 0) ? 'righy' : 'left',
					}
				})
				this.opts.yAxis.data = yAxisData;
				
				let datas = this.chartRawData.datas || []
				let series = datas.map((item,index)=>{
					return {
						name: this.chartRawData.names[index],
						type: "line",
						style: "curve",
						color: (index == 0) ? "#1890ff" : "#2fc25b",
						disableLegend: false,
						addPoint:true,
						pointShape:"circle",
						data: item
					}
				})
				
				let res = {
					categories: this.chartRawData.times,
					series:series,
					scrollX: {
					  enabled: true
					},
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.page_content {
		width: 100%;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		background-color: $power-bkg-color;
	}
	.common_card{
		border-radius: 24rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 2rpx 4px 0rpx rgba(0, 0, 0, 0.05);
		padding: 32rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 24rpx;
		width: calc(100% - 64rpx);
		flex-shrink: 0;
		overflow: clip;
		row-gap: 8rpx;
		
		display: flex;
		flex-direction: column;
	}
	.title_row{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.common-bold-title{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 42rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.com_row{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		column-gap: 16rpx;
	}
	.com_type{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		letter-spacing: normal;
		color: #9CA3AF;
	}
	.runStatus{
		border-radius: 8rpx;
		padding: 8rpx 16rpx;
		text-align: center;
		
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
	}
	.run_error{
		color: $power-color-error;
		background: rgba(239, 68, 68, 0.05);
	}
	.run_normal{
		background: #F0FDF4;
		color: $power-color-ok;
	}
	.device_sn{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #9CA3AF;
	}
	.device_sn_value{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		letter-spacing: normal;
		color: $power-color-primary;
	}
	.device_location{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	.device_lastest_time{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	.seg_row{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		column-gap: 32rpx;
		width: 100%;
	}
	.seg_row_s{
		margin-top: 32rpx;
	}
	.seg_item{
		padding: 12rpx 24rpx;
		border-radius: 9999px;
		flex-shrink: 0;
		
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		text-align: center;
		letter-spacing: normal;
	}
	.seg_item_selected{
		background-color: $power-color-primary;
		color: #FFF;
	}
	.seg_item_normal{
		background-color: #F3F4F6;
		color: #000000;
	}
	.sepc_item_1{
		flex: 1;
		padding: 32rpx;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.sepc_item_normal{
		background: #EFF6FF;
	}
	.sepc_item_error{
		background: rgba(239, 68, 68, 0.05);
	}
	.sepc_item_title{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	.sepc_item_value{
		font-family: Roboto;
		font-size: 48rpx;
		font-weight: 500;
		line-height: 64rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.sepc_item_value_flag{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #000000;
		margin-bottom: 6rpx;
		margin-left: 8rpx;
	}
	.sepc_item_value_content{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
	}
	.save_btns_title{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 42rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.btns{
		display: flex;
		flex-direction: row;
		column-gap: 32rpx;
	}
	.save_btn{
		flex: 1;
		border-radius: 8rpx;
		background-color: $power-color-primary;
		color: #FFF;
		
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 90rpx;;
		text-align: center;
		letter-spacing: normal;
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		column-gap: 16rpx;
	}
	.trend_title_content{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: center;
	}
	.trend_date_content{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-content: center;
		column-gap: 24rpx;
	}
	.trend_seg_item{
		padding: 8rpx 24rpx;
		border-radius: 9999px;
		
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		text-align: center;
		letter-spacing: normal;
	}
	.charts-box {
		width: 100%;
		height: 300px;
	}
	.h-scroller-content{
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		box-sizing: border-box;
	}
	.h-scroller{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 16rpx;
		width: max-content;
	}
</style>
